<template>
  <div class="main">
    <el-container>
      <el-aside class="aside" :width="isFold ? '50px' : '210px'">
        <main-menu :isFold="isFold" />
      </el-aside>

      <el-container>
        <el-header height="50px">
          <main-header @foldChange="foldChange" />
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import mainMenu from './components/main-menu/index.vue'
  import mainHeader from './components/main-header/index.vue'

  // fold折叠
  const isFold = ref<boolean>(false)
  function foldChange(flag: boolean) {
    isFold.value = flag
  }
</script>

<style lang="scss" scoped>
  .main {
    height: 100%;
    .el-container {
      height: 100%;
      .el-aside {
        overflow-x: hidden;
        overflow-y: auto;
        line-height: 200px;
        cursor: pointer;
        background-color: $base-menu-background;
        transition: all 0.3s linear;
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */

        &::-webkit-scrollbar {
          display: none;
        }
      }
      .el-main {
        background-color: $base-main-background;
      }
    }
  }
</style>
